<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">


    <style>
        .btn {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            /* padding: 15px 32px; */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 10px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s;
            /* Safari */
            transition-duration: 0.4s;
        }






        body {
            height: 100%;
            width: 100%;
            background-color: rgb(159, 159, 159);
            font-size: 12px;
            font-family: 微软雅黑, 宋体;
            /* padding: 5px; */
            margin: 5px;
        }

        p {
            margin-left: 20px;
            /* margin-right: 40px; */
            display: inline-block;
            width: 70px;

        }



        .qd {
            width: 65px;
        }

        .big,
        .bb {
            border: solid 1px;
        }

        th,
        tr {
            border: solid 1px;
            width: 150px;
            text-align: center;
        }

        .sm{
            padding-top:3px ;
        }
    </style>
</head>


<body>
<div>
    <h1>
        图书归还
    </h1>

    <div class="big">

        <div class="sm"><p>身份证号</p><input type="text" name="idCard" id="idCard">
            <input id="queDing" type="button" name="queDin" value="确定" class="queDing  btn">
            <input id="returnInBulk" type="button" name="returnInBulk" value="批量归还" class="qd  btn">
            <h2 id="ret"></h2>
        </div>
        <hr>
        <div class="sm"><p>用户名 </p><input class="name" name="borName" type="text">
            <p>已借数量 </p><input class="count" name="quantityBorrowed" type="text">
            <p>账户余额 </p><input class="balance" name="borBalance" type="text">
        </div>
    </div>

    <table class="table">
        <thead>
        <tr>
            <th><input type="radio" name="checkall">全选/全不选</th>
            <th>书籍名</th>
            <th>借阅时间</th>
            <th>归还时间</th>
            <th>出版社</th>
            <th>操作</th>>
        </tr>
        </thead>
        <tbody id="showBody">

        </tbody>
    </table>

</div>

<div id="xujiebox" style="width: 300px;border: solid 1px;padding-right: 0px;background-color: honeydew;float: right;">
    <ul style="list-style-type: none;">
        <li>书名:<input type="text" name="shuName" id="shuName"></li>
        <li>续借时间(单位周):<br><input type="radio" onclick="btn(this.value)" name="week" value="1">1周<input type="radio" onclick="btn(this.value)"value="2" name="week">2周<input type="radio"onclick="btn(this.value)" name="week" value="3">3周<input type="radio" name="week"onclick="btn(this.value)" value="4">4周</li>
        <br><li>续借金额:<input type="text" id="xujiejine"></li>
        <br><li style="padding-left: 35%"><input type="button" id="btn" value="确定" ></li>
    </ul>
</div>
</body>
</html>
<script src="/js/jquery-3.5.1.js"></script>
<script>
    function btn(value){

        document.getElementById("xujiejine").value=value*2;
        let jin_e=value*2;
        $("#btn").click(function () {
            $.get("/borRenewal.admin", {renewalFree:jin_e,renewalTime:jin_e/2,idCard: $("#idCard").val(),shuName:$("#shuName").val()},function (data) {
                alert(data)
            })
        })
    }
    var idcard=$("#idCard").val()
    $(function (){
        $("#queDing").click(function () {

            $.get("/ajaxReturnBorInfo.bor", {idcard: $("#idCard").val()}, function (data) {
                var jsonObj = JSON.parse(data);
                alert(data);
                for (let i = 0; i <jsonObj.length ; i++) {
                    $(".balance").val(jsonObj[i].balance)
                    $(".count").val(parseInt(jsonObj[i].boringVolume))
                    $(".name").val(jsonObj[i].userName)
                }
            })


            $.get("/queryAllBook.admin", {card: $("#idCard").val()}, function (data) {
                alert(data)
                let borObj = JSON.parse(data);

                for (let i = 0; i < borObj.length; i++) {
                    var str= "<td>" + "<input type='checkbox' name='checkbox'>" + "</td>"
                    str += "<td>" + borObj[i].bookName + "</td>";
                    str += "<td>" + borObj[i].borDate + "</td>";
                    str += "<td>" + borObj[i].repayDate + "</td>";
                    str += "<td>" + borObj[i].press + "</td>";

                    str +=  "<td>" +
                        "<input type='button' id='guiH'  value='归还' onclick='guihuan("+borObj[i].bookId+")'>"

                    // "<a href='/returnBook.admin?id="+borObj[i].bookId+"&card="+idcard+"'>归还</a>"

                        +"</td>";
                    str += "<p id='ret'></p>";
                    let tr = $("<tr>" + str + "</tr>");
                    $("#showBody").append(tr);
                    $("td").css("border", "solid 1px");
                }
                $('input[name="checkall"]').on("click", function () {
                    if ($(this).is(':checked')) {
                        $('input[name="checkbox"]').each(function () {
                            $(this).prop("checked", !this.checked);
                        });
                        $('input[name="checkall"]').each(function () {
                            $(this).prop("checked", !this.checked);
                        });
                    }
                });
            })



        })
    })

    function  guihuan(id){
        console.log("idcard"+idcard)
        if(idcard != null){
        $.post("/returnBook.admin",{"id":id,"card":idcard},function (text){
            if(text){
                $("#ret").html("已归还")
                $("#guiH").attr("disabled",true).val("已归还")
            }else{
                 $("#ret").html("失败，请线下解决")
            }
        })
        }
    }


    // var d = new Date();
    // d.setDate(d.getDate() + 50);
    var date = new Date()


    var borrowTime = formatDate(date);

    var returnTime = formatDate(date.setDate(date.getDate() + 7));


    function formatDate(time) {
        var date = new Date(time);

        var year = date.getFullYear(),
            month = date.getMonth() + 1,//月份是从0开始的
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        var newTime = year + '-' +
            (month < 10 ? '0' + month : month) + '-' +
            (day < 10 ? '0' + day : day);

        return newTime;
    }

    function popUpBox(){       //创建盒子类
        this.init = function(){   //初始化函数
            var onloadFunc = window.onload,      //将window.onload事件执行的函数保存到onloadFunc
                subInit = function(o){            //需要等结构加载完成执行的函数
                    document.body.appendChild(o.mask);      //将遮罩添加到body
                    document.body.appendChild(o.box);       //将盒子添加到body
                },
                createElement = function(){       //创建元素函数，共同的样式在这里已经设置
                    var e = document.createElement('div');       //创建一个div
                    e.style.position = 'fixed';       //设置定位方式为跟随浏览器移动
                    e.style.left = '0px';         //元素x轴位置
                    e.style.top = '0px';          //元素y轴位置
                    e.style.zIndex = '2000';      //元素z轴位置
                    e.style.width = window.innerWidth + 'px';       //元素宽度
                    e.style.height = window.innerHeight + 'px';     //元素高度
                    e.style.margin = '0px';           //元素的外边距
                    e.style.padding = '0px';      //元素的内边距
                    e.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';    //元素的背景颜色
                    return e;      //返回这个元素
                };
            this.mask = createElement();      //创建遮罩
            this.mask.onclick = (function(o){ //创建匿名函数 参数一 传入需要操作的对象
                return function(){ //匿名函数返回为遮罩绑定鼠标点击事件执行函数
                    o.hidden();     //为o这个对象执行隐藏函数
                }
            })(this);       //立即执行匿名函数 并传入当前对象
            this.box = createElement();       //盒子
            this.box.style.left = window.innerWidth / 2 + 'px';       //设置盒子水平居中
            this.box.style.top = window.innerHeight / 2 + 'px';       //设置盒子垂直居中
            this.box.style.width = '400px';                           //设置盒子宽度
            this.box.style.height = '300px';                      //设置盒子高度
            this.box.style.border = '1px solid #3399ff';            //设置边框
            this.box.style.borderRadius = '5px';                  //设置圆的边框
            this.box.style.zIndex = '2001';                           //设置盒子的z轴
            this.box.style.backgroundColor = '#FFF';              //设置盒子的背景颜色
            this.box.style.transform = 'translate(-50%, -50%)';      //执行2d动画，把这个盒子位置向反方向移动50%

            this.box.innerHTML = '';//在这里设置盒子的内容，关闭盒子调用实例的hidden()函数即可，如这个实例想这样 loginBox.hidden();//就可以隐藏

            this.hidden();      //隐藏遮罩和盒子
            window.onload = (function(o){     //创建匿名函数    参数一 要操作的对象
                return function(){             //返回onload事件执行的函数
                    if(typeof onloadFunc == 'function'){ //判断onloadFunc中有没有函数，防止覆盖其他功能的执行事件
                        onloadFunc();       //执行已经绑定的函数
                    }
                    subInit(o);             //执行初始化需要执行的函数
                }
            })(this);                       //立即执行匿名函数 并传入当前对象
        }
        this.show = function(){               //显示
            this.mask.style.display = 'block';
            this.box.style.display = 'block';
        }
        this.hidden = function(){         //隐藏
            this.mask.style.display = 'none';
            this.box.style.display = 'none';
        }
        this.init();        //调用初始化函数
        $("btn").click(function () {
            // alert($('input:radio:checked').val());
        })
    }
    var loginBox = new popUpBox();
</script>